<template>
  <div class="example-questions">
    <h4>试试以下例子：</h4>
    <div class="question-list">
      <div 
        v-for="(question, index) in questions" 
        :key="index" 
        class="question-item"
        :class="{ 'active': activeIndex === index }"
        @click="handleClick(question, index)"
      >
        <i :class="question.icon"></i>
        <span>{{ question.text }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { defineEmits } from 'vue';

const emits = defineEmits(['question-selected']);
const questions = ref([
  { icon: 'icon-doc', text: 'p-tau217' },
  { icon: 'icon-box', text: 'FT3↓、FT4↓、TSH↑的结果解读' },
  { icon: 'icon-clinical', text: '戈谢病的临床表现有哪些？' }
]);
const activeIndex = ref(-1);

const handleClick = (question, index) => {
  activeIndex.value = index;
  emits('question-selected', question.text);
};
</script>

<style scoped>
.example-questions {
  background-color: white;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}

.question-item {
  display: flex;
  align-items: center;
  margin: 8px 0;
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 8px;
  transition: background-color 0.3s ease; 
}

.question-item.active {
  background-color: #e0f7fa; 
}
</style>
